import React, { Component } from 'react'
import ReactDOM from 'react-dom'


//类式组件
// class Demo extends Component {

//     state = {
//      count: 0
//    }

//    componentDidMount(){
//     setInterval(()=>{
//       this.setState(state => ({count:state.count+1}));
//     },1000)
//   }

//     add = () => {
//    this.setState({
//      count: this.state.count + 1
//    })
//  }

//  unmount = () => {
//     window.root.unmount();
//   }


//   render() {
//     return (
//       <div>
//         <h2>当前求和为{this.state.count}</h2>
//         <button onClick={this.add}>+1</button>
//         <button onClick={this.unmount}>卸载组件</button>
//       </div>
//     )
//   }
// }

function Demo(){
 //state Hook
 //这个代码每点击一次，就会重新执行下一次，但是react在这里做了一些处理
 //这样每一次渲染都不会知道count重新变回0，第一次调用之后，这个值就缓存下来了
 const [count,setCount] = React.useState(0);
 const [name,setName] = React.useState('jack');
 const myRef = React.useRef();

  function add(){
    setCount(count+1)
  }

  function changeName(){
    setName('tom')
  }

  function unmount(){
    window.root.unmount();
  }

  function show(){
    alert(myRef.current.value)
  }


  React.useEffect(()=>{
    let timer = setInterval(()=>{
      setCount(count => count + 1)
    },1000)
  },[])

  return (
    <div>
      <input type="text" ref={myRef}></input>
      <h2>当前求和为{count}</h2>
      <button onClick={add}>+1</button>
      <h2>当前的名字为{name}</h2>
      <button onClick={changeName}>点我改名</button>
      <button onClick={unmount}>卸载组件</button>
      <button onClick={show}>点我弹框</button>
    </div>
  )
}

export default Demo